<template>
	<view class="outpatientDetail">
		<u-navbar title="社区门诊店" :is-back="false" :border-bottom="false" title-color="#111" :background="navbarBG">
			<view class="page_navbar_warp" @click="goBack">
				<image src="../../static/images/outpatient/left.png" mode="" class="navLeft"></image>
			</view>
		</u-navbar>

		<view class="header">
			<view class="bg"></view>
			<view class="logo">
				<image :src="BASE_URL+detail.images" mode=""></image>
			</view>
			<view class="message">
				<view class="map" @click="goMap">导航</view>
				<view class="title">{{detail.name}}</view>
				<view class="tel">{{detail.phone}}</view>
				<view class="address">{{detail.address}}</view>
			</view>
		</view>

		<view class="banner" @click="goSignUp()" v-if="doctor != null">
			<image src="../../static/images/outpatient/5.png" mode=""></image>
		</view>

		<view class="doctor" v-if="false">
			<view class="title">问诊医生</view>
			<view class="list">
				<view class="item" v-for="(item,index) in 3" :key="index">
					<view class="logo">
						<image src="../../static/images/outpatient/0.png" mode=""></image>
					</view>
					<view class="boxx">
						<view class="til">
							<text class="name">张兴</text>
							<text class="text">儿科</text>
							<text class="text">副主任</text>
						</view>
						<view class="addr">XXX省XXX医院</view>
						<view class="msg">擅长：糖尿病、感染性疾病、危重症治疗、感染、休克、休克治疗。</view>
						<view class="tag">
							<text class="text">知名医院</text>
							<text class="text">服务态度好</text>
							<text class="text">10年从业</text>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="content" v-if="doctor != null">
			<view class="title">专家问诊活动</view>
			<view class="tips">
				<view class="left">问诊主题:</view>
				<view class="right">《{{doctor.clinc_theme}}》</view>
			</view>
			<view class="hotDoctor">
				<view class="left">问诊医生:</view>
				<view class="list">
					<view class="item" v-for="(item,index) in doctorList" :key="index" @click="goDoct(item.id)">
						<view class="logo">
							<image :src="BASE_URL+item.image" mode=""></image>
						</view>
						<view class="boxx">
							<view class="til">
								<text class="name">{{item.doctor_name}}</text>
								<text class="text">{{item.doctor_position}}</text>
							</view>
							<view class="addr">{{item.hospital_name}}</view>
							<view class="line2" style="text-indent: 0rpx;text-align: left;" v-html="item.goodat">
							</view>
							<!-- <view class="msg">擅长：{{item.goodat}}</view> -->
							<view class="tag">
								<text class="text" v-for="(val,i) in item.doctor_tags" :key="i">{{val}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="time">
				<view class="left">问诊时间:</view>
				<view class="right">{{ $u.timeFormat(doctor.inquiry_time, 'yyyy年mm月dd日') }}</view>
			</view>
			<view class="time">
				<view class="left">问诊地点:</view>
				<view class="right">{{doctor.inquiry_address}}</view>
			</view>
			<view class="people" v-if="cliniclog.length>0">
				<view class="peopleBox">
					<view class="left">参加人员:</view>
					<view class="list" :class="{'hide':peopleShow}">
						<view class="item" v-for="(item,index) in cliniclog" :key="index">
							<view class="top">
								<view>
									<text class="name">{{item.name}}</text>
								</view>
								<text class="tel">手机号:{{item.mobile}}</text>
							</view>
							<view class="bom">报名时间:{{ $u.timeFormat(item.ctime, 'yyyy年mm月dd日') }}</view>
						</view>
					</view>
				</view>
				<view class="more" style="padding: 32rpx 0;" v-if="cliniclog.length>5">
					<view class="text2" v-if="!peopleShow" @click="peopleShow = true">
						<text>收起</text>
					</view>
					<view class="text1" v-if="peopleShow" @click="peopleShow = false">
						<text>展开更多</text>
					</view>
				</view>
			</view>
		</view>

		<view class="desc" v-if="detail.desc">
			<view class="title">诊所介绍</view>
			<view class="text" :class="{'hide':descShow}">{{detail.desc}}</view>
			<view class="more" style="padding-top: 32rpx;" v-if="detail.desc.length>200">
				<view class="text2" v-if="!descShow" @click="descShow = true">
					<text>收起</text>
				</view>
				<view class="text1" v-if="descShow" @click="descShow = false">
					<text>展开</text>
				</view>
			</view>
		</view>
		<view class="record" v-if="false">
			<view class="title">
				<text class="left">会诊记录</text>
				<text class="right">更多>></text>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in cliniclog" :key="index">
					<view class="logo">
						<image :src="item.avatar" mode=""></image>
					</view>
					<view class="right">
						<view class="top">
							<view class="name">
								<text class="text1">{{item.name}}</text>
								<text class="text2" v-if="item.sex == 0">女</text>
								<text class="text2" v-else>男</text>
							</view>
							<view class="tel">会诊医师:{{item.doctor_name}}</view>
						</view>
						<view class="bom" v-if="item.clinic_time == 0">未就诊</view>
						<view class="bom" v-else>就诊时间:{{item.clinic_time_text}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="goods" v-if="goodsList.length>0">
			<view class="title">优选药品</view>
			<view class="list">
				<view class="item" v-for="(item,index) in goodsList" :key="index"
					@click="goGoodsDetail(item.id,item.clinc_score_id)">
					<view class="img">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="til u-line-2">{{item.title}}</view>
					<view class="num">月售{{item.sales}}</view>
					<view class="price">
						<view class="left">￥{{item.current_level_price}}</view>
						<!-- <view class="add" v-if="item.goods_num">
							<view class="jia" @click.stop="selSku(item)">－</view>
							<text>{{item.goods_num}}</text>
							<view class="jia" @click.stop="selSku(item)">+</view>
						</view> -->
						<view class="add">
							<view class="jia" @click.stop="selSku(item)">+</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="nodata" v-if="doctor == null">
			当前门店暂无活动
		</view>


		<view class="foot">
			<view class="left" @click="cartShow = true">
				<view class="cart">
					<image src="../../static/images/outpatient/7.png" mode=""></image>
					<view class="num">{{cartNum}}</view>
				</view>
				<view class="price">￥{{cartPrice}}</view>
			</view>
			<view class="btn" @click="goPay">去结算</view>
		</view>

		<!-- 规格弹窗 -->
		<shopro-sku v-if="showSku && goodsInfo.id" v-model="showSku" :goodsInfo="goodsInfo" :buyType="'cart'"
			from="cart" :clinc_score_id="clinc_score_id" @sendMsg="sendMsg"></shopro-sku>

		<!-- 购物车列表弹窗 -->
		<u-popup v-model="cartShow" mode="bottom" border-radius="40" z-index="1000">
			<view class="cartShow">
				<u-checkbox-group @change="checkboxGroupChange">
					<view class="title">
						<u-checkbox v-model="foot_radio_all" shape="circle" activeColor="#e9b461" @change="AllRadio"> 全选
						</u-checkbox>
						<text class="del" @click="cartDel">删除</text>
					</view>
					<scroll-view scroll-y="true" style="height: 600rpx;">
						<view>
							<view class="goods-item" v-for="(item,index) in cartList" :key="index">
								<u-checkbox class="checkbox" v-model="item.checked" shape="circle"
									activeColor="#e9b461"></u-checkbox>
								<view class="goodsbox">
									<image :src="item.goods.image" mode="" class="logo"></image>
									<view class="text">
										<view class="name u-line-1">{{item.goods.title}}</view>
										<view class="bom">
											<view class="price">￥{{item.sku_price.current_level_price}}</view>
											<view class="add">
												<image src="../../static/images/outpatient/12.png" mode="" class="jia"
													@click="remove(item,index)"></image>
												<text class="text">{{item.goods_num}}</text>
												<image src="../../static/images/outpatient/13.png" mode="" class="jia"
													@click="add(item,index)"></image>
											</view>
										</view>
									</view>

								</view>
							</view>
						</view>
					</scroll-view>
				</u-checkbox-group>
			</view>
		</u-popup>

	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	import {
		BASE_URL
	} from '@/env.js'
	export default {
		components: {},
		data() {
			return {
				heigth: '200rpx',
				BASE_URL: BASE_URL,
				navbarBG: {
					backgroundColor: '#F5E0C1',
				},
				peopleShow: false, //参加人折叠
				descShow: false, // 诊所介绍折叠
				detail: {},
				doctor: {},
				doctorList: [],
				cliniclog: [],
				goodsList: [],
				cartNum: 0,
				cartPrice: 0,
				total: '',
				page: 0,
				cartList: [],
				showSku: false,
				goodsInfo: {},
				clinc_score_id: '',
				cartShow: false,
				foot_radio_all: true,
				baseUrl: this.$baseUrl, //后台域名地址
			}
		},
		onLoad() {

		},
		onShow() {
			let that = this
			if (uni.getStorageSync('outpatientId')) {
				// 获取门店详情
				uni.request({
					url: this.baseUrl + "/api/clinc/clinc_detail",
					data: {
						clinc_score_id: uni.getStorageSync('outpatientId'),
					},
					success: (res) => {
						if (res.data.code === 1) {
							// 门店简介 展开收起
							if (null != that.detail && null != that.detail.desc && that.detail.desc.length >
								200) {
								that.descShow = true;
							}
							that.detail = res.data.data;

							// 门店活动
							that.doctor = res.data.data.clincactivity;
							console.log("---------------doctor");
							console.log(that.doctor);


							if (null != that.doctor) {
								// 优选商品
								that.getGoodsList()
								// 我的购物车
								that.myCart();


								that.$https('outpatient.doctorlist', {
									clinc_activity_id: that.doctor.id,
								}, '', '', {
									"content-type": "application/x-www-form-urlencoded"
								}).then(res => {
									if (res.code === 1) {
										that.doctorList = res.data
										that.doctorList.forEach(item => {
											item.doctor_tags = item.doctor_tags.split(',')
										})

									}
								})


								// 会诊记录
								that.$https('outpatient.cliniclog', {
									clinc_activity_id: that.doctor.id,
								}).then(res => {
									if (res.data.code == 1) {
										that.cliniclog = res.data.data;
										if (that.cliniclog.length > 5) {
											that.peopleShow = true;
										}
									}
								});
							}
						}
					}
				})

			}
		},
		onReachBottom(e) {
			this.getGoodsList();
		},
		methods: {
			...mapActions(['getCartList', 'changeCartList']),
			//全选
			AllRadio() {
				this.cartList.forEach((item, index) => {
					item.checked = !this.foot_radio_all;
				})
			},
			// 点击勾选框就会触发，是否全部店铺选中，是否全选判断
			checkboxGroupChange(e) {
				this.cartList.forEach((item, index) => {
					let flag = true;
					//未全部选中
					if (!item.checked) {
						flag = false;
						item.checked = false;
					}
					//全部选中
					if (flag) {
						item.checked = true;
					}
				})
				this.getCartMoney();
			},
			// 计算价格
			getCartMoney() {
				let flag = true;
				this.cartNum = 0;
				this.cartPrice = 0;
				let total = 0;
				this.cartList.forEach(item => {
					if (item.checked) {
						let price = Number(item.goods_num) * Number(item.sku_price
							.current_level_price)
						total += Number(price);
						this.cartNum += Number(item.goods_num);
						this.cartPrice = this.toFixed(total, 2)

					}
					//未全部选中
					if (!item.checked) {
						flag = false;
						this.foot_radio_all = false;
					}
					//全部选中
					if (flag) {
						this.foot_radio_all = true;
					}
				})
			},
			// 添加购物车
			async selSku(info) {
				this.clinc_score_id = info.clinc_score_id;
				this.goodsInfo = {};
				this.getGoodsDetail(info.id);
				this.showSku = true;
			},
			// 商品详情
			getGoodsDetail(id) {
				let that = this;
				that.$http('goods.detail', {
					id: id,
					categoryids: ''
				}).then(res => {
					if (res.code === 1) {
						that.goodsInfo = res.data;
					}
				});
			},
			// 购物车++
			add(item, index) {
				let goods_list = []
				goods_list.push({
					goods_id: item.goods.id,
					goods_num: 1,
					goods_price: item.sku_price.current_level_price,
					sku_price_id: item.sku_price.id,
					clinc_score_id: item.clinc_score_id,
				})
				this.$http("outpatient.clincCartAdd", {
					goods_list: goods_list,
					from: 'cart'
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '添加成功',
						});
						// 我的购物车
						this.myCart();
					}
				})
			},
			// 购物车--
			remove(item, index) {
				let change = '';
				if (item.goods_num > 0 && item.goods_num != 1) {
					change = 'change'
				} else if (item.goods_num == 1) {
					change = 'delete'
				}
				if (item.goods_num > 0) {
					let cart_list = []
					cart_list.push(item.id)
					this.$http("outpatient.cartEdit", {
						value: --item.goods_num,
						act: change,
						cart_list: cart_list
					}).then(res => {
						if (res.code == 1) {
							// 我的购物车
							this.myCart();
						}
					})

				}
			},
			// 购物车删除
			cartDel() {
				uni.showModal({
					title: '清空购物车',
					content: '确定要清空购物车吗',
					success: (res) => {
						if (res.confirm) {
							let cart_list = [];
							this.cartList.map(item => {
								if (item.checked) {
									cart_list.push(item.id);
								}
							});
							this.changeCartList({
								ids: cart_list,
								art: 'delete'
							});
							this.myCart();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			// 我的购物车
			myCart() {
				this.$http("outpatient.clincCart", {
					clinc_score_id: this.detail.id
				}).then(res => {
					if (res.code == 1) {
						this.cartList = [];
						res.data.forEach(item => {
							if (item.checked == undefined) {
								this.$set(item, 'checked', true)

							}
						})
						this.cartList = res.data;
						if (this.cartList.length == 0) {
							this.cartShow = false;
						}
						this.getCartMoney();
					}
				})
			},
			// 更新购物车
			sendMsg() {
				this.foot_radio_all = true;
				this.myCart();
			},

			// 导航地图
			goMap() {
				// #ifndef MP-WEIXIN
				return uni.showToast({
					icon: 'none',
					mask: true,
					title: '请在微信内运行',
				});
				// #endif
				//  经纬度暂时写死看效果，后边根据接口返回的地址去打开导航
				let latitude = Number(this.detail.latitude);
				let longitude = Number(this.detail.longitude);
				let address = this.detail.name;
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					address: address,
					// 缩放大小
					scale: 18,
					success: function() {
						console.log('成功的回调success');
					},
					fail: function(err) {
						console.log(err);
					}
				});
				return
				// 获取定位信息
				uni.getLocation({
					type: 'wgs84', //返回可以用于uni.openLocation的经纬度
					// 用户允许获取定位
					success: function(res) {
						console.log(res, '经纬度===>')
						if (res.errMsg == "getLocation:ok") {

						}
					},
					// 用户拒绝获取定位后 再次点击触发
					fail: function(res) {
						console.log(res)
						if (res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '检测到您没打开获取信息功能权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {
												console.log('确定');
											}
										})
									} else {
										console.log('取消');
										return false;
									}
								}
							})
						}
					}
				});
			},

			// 优选商品列表
			getGoodsList() {
				if (this.total === this.goodsList.length) {
					return;
				} else {
					this.page++;
					this.$http('outpatient.lists', {
						category_id: 1,
						categoryids: 2,
						page: this.page,
						clinc_score_id: this.doctor.clinc_score_id
					}).then(val => {
						if (val.code == 1) {
							this.total = val.data.total;
							if (this.page == 1) {
								uni.stopPullDownRefresh()
							}
							let arr = val.data.data;
							if (this.page === 1) this.goodsList = [];
							this.goodsList = this.goodsList.concat(arr);
						} else {
							uni.stopPullDownRefresh()
						}
					});
				}
			},
			goBack() {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 300
				});
			},
			// 去结算
			goPay() {
				uni.setStorageSync('clinc_score_id', this.detail.id);
				let that = this;
				let {
					cartList
				} = this;
				let confirmcartList = [];
				let isActivity = false;
				for (let item of this.cartList) {
					if (item.checked) {
						if (item.cart_type === 'invalid') {
							this.$u.toast('商品已失效');
							return false;

						}
						if (item.cart_type === 'activity') {
							isActivity = true;
						}
						confirmcartList.push({
							goods_id: item.goods_id,
							sku_price_id: item.sku_price_id,
							goods_price: item.sku_price ? item.sku_price.current_level_price : 0,
							goods_num: item.goods_num
						});
					}
				}
				if (confirmcartList.length > 1 && isActivity) {
					this.$u.toast('活动商品只能单独购买');
					return false;
				}
				if (confirmcartList.length == 0) {
					this.$u.toast('请选择需要结算的商品');
					return false;
				}
				this.$Router.push({
					path: '/pages/order/confirm',
					query: {
						goodsList: confirmcartList,
						from: 'cart'
					}
				});
				this.cartShow = false;
				this.foot_radio_all = true;
			},
			// 查看医生详情
			goDoct(id) {
				uni.navigateTo({
					url: '/goodsPage/doctIntro/doctIntro?id=' + id
				})
			},
			// 去报名
			goSignUp() {
				uni.navigateTo({
					url: '/pages/outpatient/signUp?clinc_activity_id=' + this.doctor.id +
						'&price=' + this.doctor.price + '&store_id=' + this.detail.id
				})
			},
			// 商品详情
			goGoodsDetail(id, clinc_score_id) {
				console.log(999);
				console.log(clinc_score_id);
				uni.navigateTo({
					url: '/pages/goods/detail?id=' + id + '&clinc_score_id=' + clinc_score_id
				})
			},
			toFixed(num, decimal) {
				num = num.toString();
				let index = num.indexOf('.');
				if (index !== -1) {
					num = num.substring(0, decimal + index + 1)
				} else {
					num = num.substring(0)
				}
				return parseFloat(num).toFixed(decimal)
			},
		},
	}
</script>
<style scoped lang="scss">
	.outpatientDetail {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background: #ffffff;
		padding-bottom: 220rpx;

		/deep/u-popup {
			.u-mask {
				top: 0 !important;
			}

		}

		.cartShow {
			padding: 0 28rpx 120rpx;
			position: relative;
			z-index: 1000;

			.title {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #DDDDDD;

				.del {
					font-size: 28rpx;
					color: #111111;
					font-weight: bold;
				}
			}

			.goods-item {
				display: flex;
				align-items: center;
				margin-top: 50rpx;

				.goodsbox {
					width: 640rpx;
					height: 120rpx;
					display: flex;

					.logo {
						width: 120rpx;
						height: 120rpx;
						background: #FFFFFF;
						border-radius: 10rpx;
						margin-right: 16rpx;
					}

					.text {
						width: 490rpx;

						.name {
							font-size: 28rpx;
							font-weight: bold;
							color: #111111;
							margin-bottom: 20rpx;
						}

						.bom {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.price {
								font-size: 32rpx;
								font-weight: bold;
								color: #F35C0F;
								width: 300rpx;
							}

							.add {
								width: 150rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.text {
									width: 60rpx;
									text-align: center;
									font-size: 30rpx;
									color: #111111;
								}

								.jia {
									width: 36rpx;
									height: 36rpx;
								}
							}
						}
					}
				}
			}
		}

		.nodata {
			font-size: 40rpx;
			text-align: center;
			margin-top: 100rpx;
		}

		.page_navbar_warp {
			display: flex;
			align-items: center;
			flex: 1;
			padding: 0 28rpx;

			.navLeft {
				width: 15rpx;
				height: 28rpx;
			}
		}

		.header {
			width: 750rpx;
			position: relative;

			.bg {
				position: absolute;
				width: 100%;
				height: 302rpx;
				background: linear-gradient(180deg, #F5E0C1 0%, rgba(245, 224, 193, 0) 100%);
			}

			.logo {
				width: 120rpx;
				height: 120rpx;
				margin: auto;
				position: relative;
				top: 60rpx;
				z-index: 10;
				border: 4rpx solid #FFFFFF;
				border-radius: 50%;
				overflow: hidden;

				uni-image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}

			.message {
				width: 694rpx;
				min-height: 317rpx;
				margin: auto;
				background: #FFFFFF;
				box-shadow: 0rpx 3rpx 10rpx rgba(0, 0, 0, 0.1);
				border-radius: 20rpx;
				padding-top: 84rpx;
				padding-bottom: 28rpx;
				position: relative;

				.map {
					display: flex;
					align-items: center;
					position: absolute;
					right: 60rpx;
					top: 24rpx;
					width: 96rpx;
					height: 36rpx;
					border-radius: 30rpx;
					font-size: 22rpx;
					color: #DFB982;
					background: url(../../static/images/outpatient/4.png)no-repeat left center #FFF7EB;
					background-size: 36rpx 36rpx;
					padding-left: 42rpx;
				}

				.title {
					text-align: center;
					font-size: 34rpx;
					font-weight: bold;
					line-height: 50rpx;
					color: #111111;
					padding: 0 28rpx;
				}

				.tel {
					padding-left: 66rpx;
					font-size: 26rpx;
					color: #111;
					background: url(../../static/images/outpatient/1.png)no-repeat 28rpx center;
					background-size: 28rpx 28rpx;
					margin: 30rpx 0 19rpx;
				}

				.address {
					width: 640rpx;
					padding-left: 66rpx;
					font-size: 24rpx;
					line-height: 36rpx;
					color: #111;
					background: url(../../static/images/outpatient/2.png)no-repeat 28rpx top;
					background-size: 24rpx 32rpx;
					text-align: justify;
				}
			}
		}

		.banner {
			width: 694rpx;
			height: 170rpx;
			margin: 40rpx auto 0;

			uni-image {
				width: 694rpx;
				height: 170rpx;
			}
		}

		.doctor {
			margin-top: 30rpx;
			border-bottom: 10rpx solid #EEEEEE;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #111;
				margin-bottom: 24rpx;
				margin-left: 28rpx;
			}

			.list {
				.item {
					padding: 0 32rpx 0 28rpx;
					display: flex;
					border-bottom: 1rpx solid #ddd;
					margin-bottom: 18rpx;

					.logo {
						width: 120rpx;
						height: 120rpx;
						background: #FFFFFF;
						border: 1px solid #707070;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 24rpx;

						uni-image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 50%;
						}
					}

					.boxx {
						width: 550rpx;

						.til {
							display: flex;
							align-items: center;

							.name {
								font-size: 32rpx;
								font-weight: bold;
								color: #111;
							}

							.text {
								font-size: 26rpx;
								color: #777777;
								font-weight: 400;
								margin-left: 24rpx;
							}
						}

						.addr {
							font-size: 26rpx;
							color: #777;
							margin: 6rpx 0;
						}

						.msg {
							font-size: 26rpx;
							color: #777;
							margin-bottom: 10rpx;
						}

						.tag {
							display: flex;
							flex-wrap: wrap;

							.text {
								padding: 0 10rpx;
								height: 44rpx;
								line-height: 44rpx;
								background: #FFFFFF;
								border: 1rpx solid #DFB982;
								border-radius: 6rpx;
								font-size: 24rpx;
								color: #DFB982;
								margin: 0 20rpx 18rpx 0;
							}
						}
					}
				}

				.item:last-child {
					border: none;
				}
			}
		}

		.content {
			margin-top: 30rpx;
			border-bottom: 10rpx solid #EEEEEE;
			padding-left: 28rpx;

			.title {
				padding-left: 45rpx;
				font-size: 44rpx;
				font-weight: bold;
				height: 50rpx;
				line-height: 50rpx;
				color: #111111;
				background: url(../../static/images/outpatient/6.png)no-repeat left center;
				background-size: 38rpx 42rpx;
			}

			.tips {
				display: flex;
				align-items: center;
				margin: 34rpx 0 37rpx;

				.left {
					width: 120rpx;
					font-size: 28rpx;
					color: #777;
					margin-right: 24rpx;
				}

				.right {
					width: 550rpx;
					font-size: 32rpx;
					color: #BC8D55;
					text-align: justify;
				}
			}

			.hotDoctor {
				display: flex;

				.left {
					width: 120rpx;
					font-size: 28rpx;
					color: #777;
					margin-right: 24rpx;
				}

				.list {
					width: 555rpx;
					padding-right: 8rpx;

					.item {
						display: flex;
						border-bottom: 1rpx solid #ddd;
						margin-bottom: 18rpx;

						.logo {
							width: 90rpx;
							height: 90rpx;
							background: #FFFFFF;
							border: 1px solid #707070;
							border-radius: 50%;
							overflow: hidden;
							margin-right: 24rpx;

							uni-image {
								width: 90rpx;
								height: 90rpx;
								border-radius: 50%;
							}
						}

						.boxx {
							width: 440rpx;

							.til {
								display: flex;
								align-items: center;

								.name {
									font-size: 32rpx;
									font-weight: bold;
									color: #111;
								}

								.text {
									font-size: 26rpx;
									color: #777777;
									font-weight: 400;
									margin-left: 24rpx;
								}
							}

							.addr {
								font-size: 26rpx;
								color: #777;
								margin: 6rpx 0;
							}

							.msg {
								font-size: 26rpx;
								color: #777;
								margin-bottom: 10rpx;
								text-align: justify;
							}

							.tag {
								display: flex;
								flex-wrap: wrap;

								.text {
									padding: 0 10rpx;
									height: 44rpx;
									line-height: 44rpx;
									background: #FFFFFF;
									border: 1rpx solid #DFB982;
									border-radius: 6rpx;
									font-size: 24rpx;
									color: #DFB982;
									margin: 0 20rpx 18rpx 0;
								}
							}
						}
					}

					.item:last-child {
						border: none;
						margin-bottom: 0;
					}
				}
			}

			.time {
				display: flex;
				margin: 34rpx 0 34rpx;

				.left {
					width: 120rpx;
					font-size: 28rpx;
					color: #777;
					margin-right: 24rpx;
				}

				.right {
					width: 550rpx;
					font-size: 32rpx;
					color: #111;
					text-align: justify;
				}
			}

			.people {
				.peopleBox {
					display: flex;
				}

				.left {
					width: 120rpx;
					font-size: 28rpx;
					color: #777;
					margin-right: 24rpx;
				}

				.list {
					width: 550rpx;

					.item {
						border-bottom: 1rpx solid #DDDDDD;
						margin-bottom: 15rpx;
						height: 110rpx;

						.top {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.name {
								display: inline-block;
								font-size: 32rpx;
								color: #111;
								width: 120rpx;
							}

							.text {
								font-size: 24rpx;
								color: #777;
							}

							.tel {
								font-size: 22rpx;
								color: #777;
							}
						}

						.bom {
							margin-top: 18rpx;
							font-size: 22rpx;
							color: #777;
						}
					}

					.item:last-child {
						border: none;
					}
				}

				.hide {
					height: 600rpx;
					overflow: hidden;
				}
			}
		}

		.desc {
			padding: 40rpx 28rpx 30rpx;
			border-bottom: 10rpx solid #EEEEEE;

			.hide {
				height: 300rpx;
				overflow: hidden;
			}

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #111;
				margin-bottom: 24rpx;
			}

			.text {
				font-size: 26rpx;
				color: #111;
				line-height: 39rpx;
				text-align: justify;
			}
		}

		.record {
			padding: 0 28rpx;
			margin-top: 40rpx;
			border-bottom: 10rpx solid #eee;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;

				.left {
					font-size: 32rpx;
					font-weight: bold;
					color: #111;
				}

				.right {
					font-size: 22rpx;
					color: #777777;
				}
			}

			.list {
				.item {
					display: flex;
					align-items: center;
					margin-bottom: 40rpx;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #EEEEEE;

					.logo {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 20rpx;

						uni-image {
							width: 80rpx;
							height: 80rpx;
						}
					}

					.right {
						width: 595rpx;

						.top {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.name {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.text1 {
									width: 120rpx;
									color: #111;
									font-weight: bold;
									font-size: 26rpx;
								}

								.text2 {
									font-size: 22rpx;
									color: #777;
								}
							}

							.tel {
								font-size: 26rpx;
								color: #111;
								background: url(../../static/images/outpatient/3.png)no-repeat right center;
								background-size: 10rpx 20rpx;
								padding-right: 35rpx;
							}
						}

						.bom {
							margin-top: 13rpx;
							font-size: 22rpx;
							color: #777;
						}
					}
				}

				.item:last-child {
					border: none;
					margin-bottom: 0;
				}
			}
		}

		.goods {
			margin-top: 40rpx;
			padding-bottom: 180rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #111;
				margin: 0 0 24rpx 28rpx;
			}

			.list {
				display: flex;
				flex-wrap: wrap;
				padding-left: 28rpx;

				.item {
					width: 338rpx;
					height: 465rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 3rpx 6rpx rgba(0, 0, 0, 0.16);
					border-radius: 20rpx;
					margin: 0 18rpx 18rpx 0;

					.img {
						width: 338rpx;
						height: 250rpx;
						border-radius: 20rpx 20rpx 0rpx 0rpx;
						overflow: hidden;

						uni-image {
							width: 338rpx;
							height: 250rpx;
						}
					}

					.til {
						margin: 20rpx 0 10rpx;
						font-size: 26rpx;
						font-weight: bold;
						color: #111;
						padding: 0 40rpx 0 20rpx;
						height: 70rpx;
					}

					.num {
						padding-left: 20rpx;
						font-size: 22rpx;
						color: #777;
						margin-bottom: 24rpx;
					}

					.price {
						padding: 0 20rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							color: #F35C0F;
							font-size: 34rpx;
							font-weight: bold;
						}

						.add {
							width: 120rpx;
							height: 32rpx;
							display: flex;
							align-items: center;
							justify-content: flex-end;

							text {
								text-align: center;
								font-size: 32rpx;
								width: 42rpx;
							}

							image {
								width: 32rpx;
								height: 32rpx;
							}

							.jia,
							.jian {
								text-align: center;
								width: 32rpx;
								height: 32rpx;
								line-height: 32rpx;
								font-size: 32rpx;
								color: #fff;
								background: #DFB982;
							}
						}
					}
				}
			}
		}

		.foot {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 1100;
			width: 100%;
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -3rpx 6rpx rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 28rpx;

			.left {
				display: flex;
				position: relative;

				.cart {
					position: absolute;
					left: 0;
					bottom: 0;
					z-index: 100;
					width: 150rpx;
					height: 150rpx;

					uni-image {
						width: 150rpx;
						height: 150rpx;
					}

					.num {
						position: absolute;
						right: 15rpx;
						top: 12rpx;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						background: #E52222;
						border-radius: 50%;
						text-align: center;
						font-size: 26rpx;
						font-weight: bold;
						color: #fff;
					}
				}

				.price {
					line-height: 100rpx;
					margin-left: 180rpx;
					font-size: 34rpx;
					font-weight: bold;
					color: #111;
				}
			}

			.btn {
				width: 164rpx;
				height: 68rpx;
				line-height: 68rpx;
				background: #DFB982;
				border-radius: 40rpx;
				text-align: center;
				color: #fff;
				font-size: 28rpx;
			}
		}

		.more {
			display: flex;
			align-items: center;
			justify-content: center;

			.text1 {
				font-size: 22rpx;
				color: #777;
				background: url(../../static/images/outpatient/8.png)no-repeat right center;
				background-size: 16rpx 12rpx;
				padding-right: 20rpx;
			}

			.text2 {
				font-size: 22rpx;
				color: #777;
				background: url(../../static/images/outpatient/9.png)no-repeat right center;
				background-size: 16rpx 12rpx;
				padding-right: 20rpx;
			}

		}
	}

	.line2 {
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
</style>
